<template>
	<view>
		
		<view class="login-header">注册</view>
		
		<view class="login-wrapper">
			<view class="login-wrapper__item">
				<input class="login-wrapper__item__input" maxlength="32" placeholder-class="placeholder" type="text" v-model="account" placeholder="请输入手机号码/邮箱" />
				<text class="contorl-icon iconfont" v-if="account" @click="clearAccount">&#xe6d0;</text>
			</view>
			<view class="login-wrapper__item">
				<input class="login-wrapper__item__input" maxlength="6" placeholder-class="placeholder" type="text" v-model="imgCode" placeholder="图形验证码" />
				<view class="login-wrapper__item__send">
					<image :src="imgCodeInfo.pic" mode="scaleToFill" style=" width: 120rpx; height: 60rpx;" @click="changeImgCode"></image>
				</view>
			</view>
			<view class="login-wrapper__item">
				<input class="login-wrapper__item__input" maxlength="6" placeholder-class="placeholder" type="text" v-model="dynCode" placeholder="请输入动态验证码" />
				<view class="login-wrapper__item__txt" v-if="isSend">{{countDown}}秒后重新发送</view>
				<view class="login-wrapper__item__send" v-else @click="getDynCode">获取动态密码</view>
			</view>
			<view class="login-wrapper__item">
				<input class="login-wrapper__item__input" maxlength="16" placeholder-class="placeholder" type="text" :password="isPassWord" v-model="password" placeholder="设置登录密码（至少6位）" />
				<text class="contorl-icon iconfont" :class="isPassWord ? '' : 'active'" @click="toggleType">&#xe62b;</text>
			</view>
			<view class="login-wrapper__agreement" v-if="sysConfig.cfg_member_agreement_open == 1">
				<text class="check-icon iconfont" :class="ischecked ? 'checked' : ''" @click="hasAgreement">{{ischecked ? '&#xe6d2;' : '&#xe6d3;'}}</text>
				同意我们的<text class="name" @click="agreementLink">《{{sysConfig.cfg_member_agreement_title}}》</text>
			</view>
			<view class="login-wrapper__button" v-if="completeCheck" @click="submitRegister">注册</view>
			<view class="login-wrapper__button disabled" v-else>注册</view>
		</view>
		
	</view>
</template>

<script>
	import {check_phone, check_email} from '@/utils/utils.js'
	export default {
		data() {
			return {
				imgCodeInfo: '',
				account: '',
				imgCode: '',
				dynCode: '',
				password: '',
				isPassWord: true,
				ischecked: false,
				countDown: 119,
				isSend: false,
				sysConfig:{ // 系统配置
					cfg_member_agreement_open: '',
					cfg_member_agreement_title: '',
				},
			}
		},
		computed: {
			// 验证信息完整度
			completeCheck(){
				if(this.sysConfig.cfg_member_agreement_open == 1)
				{ // 开启协议
					return this.account && this.imgCode && this.dynCode && this.password && this.ischecked
				}
				else
				{
					return this.account && this.imgCode && this.dynCode && this.password
				}
			}
		},
		onLoad() {
			this.getImgCode();
			// 获取注册协议相关
			this.getSysConfig();
		},
		methods: {
			// 获取系统配置
			async getSysConfig () {
				let params = {
					method: 'api/v2/system/get_sys_configs',
					filed:"cfg_member_agreement_open,cfg_member_agreement_title"
				};
				let res = await this.$http(params);
				if(res.status)
				{
					this.sysConfig = res.data;
				}
			},
			async getImgCode(){
				let getImgRes;
				let params = {
					method: "api/v2/common/get_code_image"
				}
				getImgRes = await this.$http(params);
				this.imgCodeInfo = getImgRes.data
			},
			
			// 清除账号
			clearAccount(){
				this.account = ''
			},
			
			// 获取动态验证码
			getDynCode(){
				let timer;
				let account = this.account;
				let isFormat = check_phone(account) || check_email(account);
				// 空账号验证
				if(!account){
					uni.showToast({
						title: '账号不能为空',
						icon: 'none'
					})
					return;
				}
				
				// 账号格式验证
				if(!isFormat){
					uni.showToast({
						title: '账号格式不正确',
						icon: 'none'
					})
					return;
				}
				this.isSend = true;
				timer = setInterval(() => {
					if(this.countDown > 1){
						this.countDown--
					}else{
						this.countDown = 119;
						this.isSend = false;
						clearInterval(timer)
					}
				}, 1000)
				
				this.$_getRegisterCode()
				
			},
			
			// 密码显示隐藏
			toggleType(){
				this.isPassWord = !this.isPassWord
			},
			
			// 是否同意协议
			hasAgreement(){
				this.ischecked = !this.ischecked
			},
			
			// 协议详情
			agreementLink(){
				uni.navigateTo({
					url: './agreement'
				})
			},
			
			// 更换图片验证码
			changeImgCode(){
				this.getImgCode()
			},
			
			// 提交注册
			submitRegister(){
				let account = this.account;
				let password = this.password;
				let isFormat = check_phone(account) || check_email(account);
				
				//账号格式验证
				if(!isFormat){
					uni.showToast({
						title: '账号格式不正确',
						icon: 'none'
					})
					return;
				}
				
				
				// 密码长度验证
				if(password.length < 6){
					uni.showToast({
						title: '密码长度不能小于6位',
						icon: 'none'
					})
					return;
				}
				
				
				this.$_submitRegister()
				
			},
			
			// 获取注册验证码
			async $_getRegisterCode(){
				let codeRes,
					params = {
						method: "api/v2/dynamic/code",
						receiver: this.account,
						msgtype: "reg_msgcode"
					}
				codeRes = await this.$http(params);
				if(codeRes.status){
					uni.showToast({
						title: '验证码发送成功!',
						icon: 'none'
					})
				}else{
					uni.showToast({
						title: codeRes.msg,
						icon: 'none'
					})
				}
			},
			
			// 注册接口
			async $_submitRegister(){
				// 获取分销邀请人员的分销码
				let fxpcode = uni.getStorageSync('fxpcode');
					fxpcode = fxpcode ? fxpcode : '';
					
				let registerRes,
					params = {
						method: "api/v2/member/register/do_reg",
						user: this.account,
						pwd: this.password,
						msg_code: this.dynCode,
						captcha_key: this.imgCodeInfo.key,
						code: this.imgCode,
						fxpcode
					}
				registerRes = await this.$http(params);
				if(registerRes.status){
					uni.setStorageSync('token',registerRes.data.token);
					uni.setStorageSync('userInfo',registerRes.data.memberInfo);
					this.$store.commit('login', registerRes.data.memberInfo);
					uni.showToast({
						title: "注册成功",
						icon: 'none'
					})
					setTimeout(() => {
						uni.switchTab({
							url: "../../../pages/ucenter/index"
						})
					}, 1500)
				}else{
					// 重新获取图片验证码
					this.getImgCode()
					uni.showToast({
						title: registerRes.msg,
						icon: 'none'
					})
				}
			}
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.login-header{
		padding: 60rpx;
		font-size: 40rpx;
		font-weight: bold;
	}
	.login-wrapper{
		padding: 0 60rpx;
		&__item{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			position: relative;
			&:after{
				content: "";
				display: block;
				width: 100%;
				height: 2rpx;
				position: absolute;
				bottom: 0;
				transform: scaleY(.5);
				background-color: $uni-border-color;
			}
			&__input{
				flex: 1 1 auto;
				padding: 30rpx 0 20rpx;
				font-size: $uni-font-size-base;
			}
			&__send{
				flex: 0 0 auto;
				color: $uni-color-primary;
				margin-left: 40rpx;
				font-size: $uni-font-size-sm;
			}
			&__txt{
				flex: 0 0 auto;
				color: $uni-text-color-disable;
				margin-left: 40rpx;
				font-size: $uni-font-size-sm;
				font-family: Arial, Helvetica, sans-serif;
			}
		}
		&__button{
			color: $uni-text-color-inverse;
			margin-top: 56rpx;
			padding: 20rpx 0;
			text-align: center;
			border-radius: $uni-border-radius-lg;
			font-size: $uni-font-size-lg;
			background-color: $uni-bg-color-primary;
			&.disabled{
				background-color: #bdefd6;
			}
		}
		&__agreement{
			color: $uni-text-color-grey;
			margin-top: 40rpx;
			font-size: $uni-font-size-sm;
			.name{
				color: $uni-text-color;
			}
			.check-icon{
				display: inline-block;
				margin-right: 8rpx;
				margin-top: -4rpx;
				vertical-align: middle;
				font-size: 32rpx;
				&.checked{
					color: #ff8902;
				}
			}
		}
	}
	.contorl-icon{
		color: #c2c6cf;
		display: inline-block;
		margin-left: 20rpx;
		font-size: 38rpx;
		&.active{
			color: #ff6700;
		}
	}
	.placeholder{
		color: $uni-text-color-placeholder;
	}
</style>
